<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/css/styletable.css" type="text/css"/>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.all.js" charset="utf-8"></script>
    <script src="/js/jquery.2.1.4.js" charset="utf-8"></script>
    <script type="text/javascript" src="/picker/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/picker/src/palette-color-picker.js"></script>
    <link rel="stylesheet" type="text/css" href="/picker/css/normalize.css"/>
    <link rel="stylesheet" href="/picker/src/palette-color-picker.css"/>
</head>
<body>
<script>
    function vbl() {
        if ($(".check:checked").size() == 0) {
            layer.alert('请至少选一项', {
                skin: 'layui-layer-molv'
                , closeBtn: 0
            });
        } else {
            $("#colform").attr("action", "/res/vbl").submit();
        }
    }

    function unvbl() {
        if ($(".check:checked").size() == 0) {
            layer.alert('请至少选一项', {
                skin: 'layui-layer-molv'
                , closeBtn: 0
            });
        } else {
            $("#colform").attr("action", "/res/unvbl").submit();
        }
    }

    function edit(th) {
        var cid = $(th).parent().prevAll(".colid").children().val();
        layer.open({
            title:"编辑栏目",
            type: 2,
            area: ['40%', '50%'],
            content: '/res/upcolumn/' + cid
        });
        return false;
    }
</script>
<div style="margin: 10px 15px 0px 15px">
    <div style="margin-top: 1px;margin-left: 1px;margin-bottom: 8px">
        <button class="layui-btn layui-btn-edit" onclick="vbl();">可见</button>
        <button class="layui-btn layui-btn-normal" onclick="unvbl();">隐藏</button>
    </div>
    <form id="colform">
        <table style="width: 100%">
            <tr>
                <th width="5%"></th>
                <th width="25%">栏目名称</th>
                <th width="10%">排列顺序</th>
                <th width="15%">栏目状态</th>
                <th width="25%">栏目样式</th>
                <th width="20%">操作</th>
            </tr>

            <c:forEach items="${columns}" var="column">
                <tr>
                    <td height="45px" class = "colid" align="center"><input class="check" name="checks" value="${column.cid}" type="checkbox"/></td>
                    <td height="45px">${column.cname}</td>
                    <td height="45px">${column.corder}</td>
                    <td align="center">
                    <span class="layui-btn layui-btn-mini"
                          <c:if test="${column.cstate=='可见'}">style="background-color: #00ac00"</c:if>
                          <c:if test="${column.cstate=='隐藏'}">style="background-color: #1d85de"</c:if>>
                            ${column.cstate}</span></td>
                    <td height="45px" align="center"><button style="width:95%;height:75%;border:none;background-color: ${column.cstyle};color: #fff;font-size: 13px;" onclick="return false;">栏目样式</button></td>
                    <td height="45px" align="center">
                        <button class="layui-btn layui-btn-small layui-btn-delete" onclick="return edit(this);">
                            编辑
                        </button>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </form>
</div>
</body>
</html>
